<template>
	<el-container>
		<el-header>
			<Header></Header>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<Aside></Aside>
			</el-aside>
			<el-main>
				<h3 style="text-align:center;">编辑会员</h3>

				<el-form ref="form" :model="form" label-width="100px" style="width:100%;margin:0 auto;">
					<el-form-item label="账号">
						<el-input type="text" v-model="form.username"></el-input>
					</el-form-item>

					<el-form-item label="密码">
						<el-input type="password" v-model="form.password"></el-input>
					</el-form-item>

					<el-form-item label="所属组">
						<el-select v-model="form.groupid">
							<el-option v-for="item in $core_enums('member_group')" :key="item.key" :label="item.value"
								:value="item.key"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="真实姓名">
						<el-input type="text" v-model="form.truename"></el-input>
					</el-form-item>

					<el-form-item label="电话">
						<el-input type="text" v-model="form.telephone"></el-input>
					</el-form-item>

					<el-form-item label="QQ">
						<el-input type="text" v-model="form.qq"></el-input>
					</el-form-item>

					<el-form-item label="手机">
						<el-input type="text" v-model="form.mobile"></el-input>
					</el-form-item>

					<el-form-item label="邮箱">
						<el-input type="text" v-model="form.email"></el-input>
					</el-form-item>

					<el-form-item label="地址">
						<el-input type="text" v-model="form.address"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmit">提交</el-button>
					</el-form-item>
				</el-form>
			</el-main>
		</el-container>
		<el-footer>
			<Footer></Footer>
		</el-footer>
	</el-container>
</template>

<script>
	//https://blog.csdn.net/kawayiyy123/article/details/113616569
	export default {
		async onLoad(query) {
			let userid = parseInt(query.userid);
			const data = await this.$axios.post("/api/member/preview", {
				userid
			});
			let form = {};
			form.userid = data.data.userid;
			form.username = data.data.username;
			form.password = "";
			form.groupid = String(data.data.groupid);
			form.truename = data.data.truename;
			form.telephone = data.data.telephone;
			form.qq = data.data.qq;
			form.mobile = data.data.mobile;
			form.email = data.data.email;
			form.address = data.data.address;
			this.form = form;
		},
		data() {
			return {
				form: {
					userid: 0,
					username: "",
					password: "",
					groupid: "1",
					truename: "",
					telephone: "",
					qq: "",
					mobile: "",
					email: "",
					address: ""
				}
			};
		},
		async mounted() {},
		methods: {
			async onSubmit() {
				if (!this.form.username) {
					this.$message({
						type: "error",
						message: "账号不能为空"
					});
					return;
				}

				try {
					let data = await this.$axios.post("/api/member/mod", this.form);
					if (parseInt(data.code) > 0) {
						this.$message({
							message: data.msg,
							type: "success",
							duration: 1000
						});
						setTimeout(() => {
							location.reload();
						}, 1000);
					} else {
						this.$message.error(data.msg);
					}
				} catch (error) {
					this.$message.error(error.toString());
				}
			}
		}
	};
</script>

<style scoped>
	.el-header,
	.el-footer {
		background-color: #b3c0d1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		background-color: #d3dce6;
		color: #333;
		text-align: center;
	}

	.el-main {
		
		color: #333;
		
	}
</style>
